let layer = null
let form = null
layui.use(['layer', "form"], function () {
    layer = layui.layer;
    form = layui.form

    // 1.列表加载
    function list() {
        $.ajax({
            url: "/my/article/cates",
            success: function (res) {
                if (res.status == 0) {
                    // 置空tbody
                    $("tbody").html("");

                    // 遍历添加内容
                    $.each(res.data, function (index, item) {
                        let one = $(`<tr>
                          <td>${item.name}</td>
                          <td>${item.alias}</td>
                          <td>
                            <button type="button" class="layui-btn layui-btn-xs btn-edit" index="${item.Id}" name="${item.name}" alias="${item.alias}">编辑</button>
                            <button type="button" class="layui-btn layui-btn-danger layui-btn-xs btn-delete"  index="${item.Id}">删除</button>
                          </td>
                        </tr>`);

                        $("tbody").append(one);
                    });
                }
            }
        });
    }
    list()



    // 2.新增


    let add_str = `<form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="add_form">
                <div class="layui-form-item">
                  <label class="layui-form-label">类别名称</label>
                  <div class="layui-input-block">
                    <input type="text" name="name" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label">类别别名</label>
                  <div class="layui-input-block">
                    <input type="text" name="alias" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                  </div>
                </div>
                <div class="layui-form-item">
                  <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                  </div>
                </div>
               </form>`;

    //    点击新增类别
    $('#add').on('click', function () {
        // 新增弹窗
        let index = layer.open({
            type: 1,
            title: '新增文章类别',
            content: add_str,
            area: ['500px', '300px']
        })

        $('#add_form').on('submit', function (e) {
            // 阻值默认
            e.preventDefault()

            // 获取输入的内容

            let data = $(this).serialize()

            // 发送请求
            $.ajax({
                url: '/my/article/addcates',
                type: 'post',
                data: data,
                success: function (res) {
                    // 提示信息
                    layer.msg(res.message)
                    if (res.status == 0) {
                        // 关闭弹窗
                        layer.close(index)
                        // 重新加载列表
                        list()
                    }
                }
            })

        })




    })


    // 3.删除   事件委托
    $("tbody").on('click', '.btn-delete', function () {
        // 获取id
        let id = $(this).attr('index')
        // 提交ajax 删除数据


        // 询问弹窗
        layer.confirm('确定要删除吗?', function (index) {

            layer.close(index);

            $.ajax({
                // 动态url地址   :id  代表动态传入id值
                url: '/my/article/deletecate/' + id,

                success: function (res) {
                    layer.msg(res.message)
                    if (res.status == 0) {
                        list()
                    }
                }
            })

        });
    })



    // 4.编辑   事件委托


    let edit_str = `<form class="layui-form edit-form" action="" style="margin: 30px; margin-left: 0px;" id="edit_form" lay-filter="edit">
                  <div class="layui-form-item">
                    <label class="layui-form-label">类别名称</label>
                    <div class="layui-input-block">
                      <input type="text" name="name" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label">类别别名</label>
                    <div class="layui-input-block">
                      <input type="text" name="alias" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <div class="layui-input-block">
                      <input type="hidden" name="Id">
                      <button class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
                    </div>
                  </div>
                </form>`;

    $("tbody").on('click', '.btn-edit', function () {
        // 4.1获取id
        let Id = $(this).attr('index')
        let name = $(this).attr('name')
        let alias = $(this).attr('alias')
        // 提交ajax 删除数据

        // 4.2. 弹窗
        let index = layer.open({
            type: 1,
            title: '修改文章类别',
            content: edit_str,
            area: ['500px', '270px']
        })

        // 4.3表单回填
        form.val("edit", {
            Id: Id,
            name: name,
            alias: alias
        });


        // 4.4发送请求更改数据
        $('.edit-form').on('submit', function (e) {
            // 阻值默认
            e.preventDefault()
            // 获取输入的内容
            let data = $(this).serialize()
            // 发送请求
            $.ajax({
                url: '/my/article/updatecate',
                type: 'post',
                data: data,
                success: function (res) {
                    // 提示信息
                    layer.msg(res.message)
                    if (res.status == 0) {
                        // 关闭弹窗
                        layer.close(index)
                        // 重新加载列表
                        list()
                    }
                }
            })

        })





    })








});